<template>
  <div class="app-container">
    <el-form
      class="searchform"
      :model="queryParams"
      ref="queryForm"
      size="small"
      label-width="100px"
    >
      <el-row>
        <el-col :span="5">
          <el-form-item label="公告标题" prop="noticeTitle" label-width="80px">
            <el-input
              v-model="queryParams.noticeTitle"
              placeholder="请输入"
              clearable
              @keyup.enter.native="getList()"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="发布者" prop="createNickName" label-width="80px">
            <el-input
              v-model="queryParams.createNickName"
              placeholder="请输入"
              clearable
              @keyup.enter.native="getList()"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="发布时间" prop="formDate" label-width="90px">
            <el-date-picker
              v-model="queryParams.formDate"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              clearable
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label-width="20px">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="getList()"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="reset()"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div class="table-wrapper">
      <div class="tableoperation">
        <el-button
          type="primary"
          size="mini"
          @click.native.prevent="openDialog()"
          >发布公告</el-button
        >
      </div>

      <el-table
        v-loading="loading"
        :height="height - 400 + 'px'"
        :data="noticeList"
        @selection-change="handleSelectionChange"
        @row-dblclick="(row) => openDialog(row, '3')"
      >
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column
          label="公告标题"
          align="center"
          prop="noticeTitle"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="发布者"
          align="center"
          prop="createNickName"
          width="100"
        />
        <el-table-column
          label="发布时间"
          align="center"
          prop="createTime"
          width="150"
        />
        <el-table-column
          label="修改人"
          align="center"
          prop="updateBy"
          width="100"
        />
        <el-table-column
          label="修改时间"
          align="center"
          prop="updateTime"
          width="150"
        />
        <el-table-column label="应读人数" align="center" width="100">
          <template slot-scope="scope">
            <span @click="openRead(1, scope.row)" class="viewNumber">{{
              scope.row.totalUserNumber
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="未读人数" align="center" width="100">
          <template slot-scope="scope">
            <span @click="openRead(3, scope.row)" class="viewNumber">{{
              scope.row.unreadUserNumber
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="已读人数" align="center" width="100">
          <template slot-scope="scope">
            <span @click="openRead(2, scope.row)" class="viewNumber">{{
              scope.row.readUserNumber
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="附件下载人数" align="center" width="100">
          <template slot-scope="scope">
            <span @click="openRead(4, scope.row)" class="viewNumber">{{
              scope.row.downUserNumber
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row }">
            <el-button
              @click.native.prevent="openDialog(row)"
              type="text"
              v-hasPermi="['system:notice:edit']"
            >
              编辑
            </el-button>
            <el-button
              @click.native.prevent="handleDelete(row)"
              type="text"
              style="color: #f32d2d"
              v-hasPermi="['system:notice:remove']"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 添加/修改公告弹框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="1200px"
      class="adddialog"
      append-to-body
      @close="closeDialog"
      v-dialogDrag="true"
    >
      <div class="left">
        <div class="left-title">选择人员</div>
        <div class="left-dept">
          <!-- <treeselect v-model="queryParams.deptId" show-checkbox :options="deptOptions" :show-count="true" placeholder="请选择" /> -->
          <el-tree
            ref="deptTree"
            :data="deptUserTreeData"
            show-checkbox
            node-key="id"
            :props="defaultProps"
            @check="handleCheck"
            :default-expand-all="true"
          >
          </el-tree>
        </div>
        <div class="left-tip">已选择 {{ userIds.length }} 人</div>
      </div>

      <div class="right">
        <el-form
          :model="form"
          :rules="rules"
          :disabled="status == '3'"
          ref="form"
          size="small"
          label-width="90px"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="公告标题" prop="noticeTitle">
                <el-input
                  v-model="form.noticeTitle"
                  placeholder="请输入"
                  clearable
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="内容">
                <Vue-editor
                  placeholder="请输入"
                  v-model="form.noticeContent"
                ></Vue-editor>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="上传附件">
                <el-upload
                  ref="upload"
                  :action="upload.url"
                  :headers="upload.headers"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :on-success="handleFileSuccessSecond"
                  :before-upload="beforeAvatarUpload"
                  :file-list="fileList"
                  multiple
                >
                  <el-button
                    icon="el-icon-upload"
                    size="mini"
                    plain
                    type="primary"
                    >上传文件</el-button
                  >
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 查看公告弹框 -->
    <el-dialog
      title="查看通知公告"
      :visible.sync="dialogVisibleView"
      width="1200px"
      append-to-body
      class="viewdialog"
      v-dialogDrag="true"
    >
      <div class="viewtitle">{{ form.noticeTitle }}</div>
      <div class="viewinfo">
        发布者：{{ form.createNickName }}<span class="blank"></span>发布时间：{{
          form.createTime
        }}
      </div>
      <Vue-editor disabled v-model="form.noticeContent"></Vue-editor>
      <div class="filelist">
        <span class="filetitle" v-if="fileList.length != 0">附件：</span>
        <div class="fileitem" v-for="(item, index) in fileList" :key="index">
          <span class="filename" @click="preView(item)">{{ item.name }}</span>
          <span class="download" @click="handleDownload(item)">下载</span>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleView = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 读人员弹框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisibleRead"
      width="600px"
      append-to-body
      class="readdialog"
      v-dialogDrag="true"
    >
      <div class="readNumber">{{ innertitle }} {{ readNumber }} 人</div>
      <div class="readTree">
        <el-tree
          disabled
          ref="deptTree"
          :data="deptUserTreeData"
          :filter-node-method="filterNode"
          node-key="id"
          :default-expand-all="true"
          :props="defaultProps"
        >
        </el-tree>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleRead = false">关 闭</el-button>
      </div>
    </el-dialog>

    <!-- 预览文件弹框 -->
    <el-dialog
      title="预览"
      :visible.sync="dialogVisibleWord"
      class="dialogVisibleWord"
      append-to-body
    >
      <div class="docxRef"></div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listNotice,
  getNotice,
  addNotice,
  updateNotice,
  delNotice,
  seeSituation,
  deptUserTree,
} from "@/api/system/notice";
import { listOss, listByIds, delOss } from "@/api/system/oss";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";

import { VueEditor } from "vue2-editor";

import axios from "axios";
import { renderAsync } from "docx-preview";
import XLSX from "xlsx";

export default {
  name: "Notice",
  components: { Treeselect, VueEditor },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 公告表格数据
      noticeList: [],
      // 弹出层标题
      title: "",
      status: null,
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        noticeTitle: undefined,
        createNickName: undefined,
      },
      // 视图高度
      height: document.documentElement.clientHeight,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        noticeTitle: [
          { required: true, message: "公告标题不能为空", trigger: "blur" },
        ],
      },
      dialogVisible: false,
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 部门树选项
      deptUserTreeData: [],
      // 部门树选项
      deptOptions: [
        {
          id: 100,
          parentId: 0,
          label: "福康电子计量",
          weight: 0,
          children: [
            {
              id: 101,
              parentId: 100,
              label: "商务部",
              weight: 1,
              disabled: true,
            },
            {
              id: 102,
              parentId: 100,
              label: "检验实验室",
              weight: 2,
              children: [
                {
                  id: "1655865227286777858",
                  parentId: 102,
                  label: "111",
                  weight: 1,
                },
              ],
            },
            {
              id: "1646702039977369602",
              parentId: 100,
              label: "主任",
              weight: 3,
              disabled: true,
            },
            {
              id: "1646702039977369603",
              parentId: 100,
              label: "用户",
              weight: 3,
              isuser: true,
            },
          ],
        },
      ],
      // 已选择的人员
      userIds: [],
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken(),
          "Content-Disposition": "inline",
        },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/oss/upload",
      },
      // 上传文件列表
      fileList: [],
      // 查看公告弹框
      dialogVisibleView: false,
      //
      innertitle: "",
      readNumber: 0,
      dialogVisibleRead: false,
      dialogVisibleWord: false,
    };
  },
  created() {
    this.getList();
    // this.getDeptTree();
    this.getDeptUserTree();
  },
  methods: {
    // 获取公告列表
    getList() {
      this.queryParams.createTimeStart =
        this.queryParams.formDate && this.queryParams.formDate[0];
      this.queryParams.createTimeEnd =
        this.queryParams.formDate && this.queryParams.formDate[1];
      let queryParams = { ...this.queryParams };
      delete queryParams.formDate;
      this.loading = true;
      delete this.queryParams.formDate;
      listNotice(queryParams)
        .then((response) => {
          this.noticeList = response.rows;
          this.total = response.total;
          this.loading = false;
        })
        .catch((response) => {
          this.loading = false;
        });
    },
    // 查询部门和用户下拉树结构
    getDeptUserTree() {
      deptUserTree().then((response) => {
        let temp = response.data;
        this.addDisabled(temp);
        // this.addChildren(temp);
        this.deptUserTreeData = temp;

        this.deptUserTreeData.forEach((item) => {
          this.addDeptDisabled(item);
        });
        console.log("处理后", this.deptUserTreeData);
      });
    },
    // 添加禁用属性（没有children且为部门）
    addDisabled(list) {
      list.forEach((item) => {
        if (
          (!item.children || item.children.length == 0) &&
          item.weight != 10000
        ) {
          item.disabled = true;
        }
        if (item.children && item.children.length != 0) {
          this.addDisabled(item.children);
        }
      });
    },
    // 部门添加禁用属性（没有children且为部门）
    addDeptDisabled(obj) {
      if (!obj.children) {
        if (obj.weight != 10000) {
          obj.disabled = true;
          return false;
        } else {
          return true;
        }
      } else {
        let flag = false;
        obj.children.forEach((item) => {
          if (this.addDeptDisabled(item)) {
            flag = true;
          }
        });
        if (!flag) {
          obj.disabled = true;
        }
        return flag;
      }
    },
    // 点击树节点
    handleCheck(val, checkinfo, b) {
      console.log("点击树节点", val, checkinfo, b);
      let userIds = [];
      if (checkinfo.checkedNodes && checkinfo.checkedNodes != 0) {
        checkinfo.checkedNodes.forEach((item) => {
          if (!item.children) {
            userIds.push(item.id);
          }
        });
      }
      this.userIds = userIds;
      console.log("this.userIds", this.userIds);
    },
    // 打开对话框
    openDialog(row, status) {
      console.log("子row", row);
      // this.resetFormmy();
      this.fileList = [];
      if (row) {
        getNotice(row.noticeId).then((response) => {
          this.form = response.data;
          if (this.form.ossId) {
            listByIds(this.form.ossId).then((response) => {
              this.fileList = response.data;
              this.fileList.forEach((item) => {
                item.name = item.originalName;
              });
            });
          }
          console.log("this.fileList", this.fileList);

          if (status == "3") {
            this.status = "3";
            this.dialogVisibleView = true;
          } else {
            this.status = "2";
            this.title = "编辑通知公告";
            this.dialogVisible = true;
            if (this.form.noticeUserIds) {
              this.userIds = this.form.noticeUserIds;
              this.$nextTick(() => {
                this.$refs.deptTree.setCheckedKeys(this.userIds, true);
              });
            } else {
              this.userIds = [];
            }
            console.log("this.userIds", this.userIds);
          }
        });
      } else {
        this.form = {
          ossId: null,
          noticeId: undefined,
          noticeTitle: undefined,
          noticeType: undefined,
          noticeContent: undefined,
        };
        this.status = "1";
        this.title = "发布通知公告";
        this.dialogVisible = true;
      }
    },
    openRead(type, row) {
      seeSituation(type, row.noticeId).then((response) => {
        if (type == 1) {
          this.title = "应读人员";
          this.innertitle = "应读";
        }
        if (type == 2) {
          this.title = "已读人员";
          this.innertitle = "已读";
        }
        if (type == 3) {
          this.title = "未读人员";
          this.innertitle = "未读";
        }
        if (type == 4) {
          this.title = "附件下载人员";
          this.innertitle = "附件下载";
        }
        this.dialogVisibleRead = true;
        this.$nextTick(() => {
          if (response.data) {
            this.userIds = response.data.map((item) => item.userId);
            this.$refs.deptTree.setCheckedKeys(this.userIds, true);
            this.$refs.deptTree.filter(this.userIds);
            this.readNumber = response.data.length;
          } else {
            this.userIds = [];
            this.$refs.deptTree.setCheckedKeys([], true);
            this.$refs.deptTree.filter(this.userIds);
            this.readNumber = 0;
          }
        });
      });
    },
    // 筛选节点
    filterNode(value, data) {
      return value.indexOf(data.id) !== -1;
    },
    // 关闭弹框
    closeDialog() {
      this.form = {};
      this.resetForm("form");
      this.fileList = [];
      this.$refs.deptTree.setCheckedKeys([], true);
      this.userIds = [];
    },
    // 提交按钮
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let ossId = this.fileList
            .map((item) => {
              if (item.ossId) {
                return item.ossId; /* 回显的列表格式 */
              } else if (item.response.data) {
                return item.response.data.ossId; /* 新上传的列表格式 */
              }
            })
            .join(",");
          this.$set(this.form, "ossId", ossId);
          if (this.userIds.length == 0) {
            this.$message.warning("请选择通知人员!");
            return;
          }
          this.$set(this.form, "noticeUserIds", this.userIds);
          if (this.status == "1") {
            addNotice(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.dialogVisible = false;
              this.getList();
            });
          } else if (this.status == "2") {
            updateNotice(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.dialogVisible = false;
              this.getList();
            });
          }
        }
      });
    },
    // 搜索重置
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      };
      this.resetForm("queryParams");
      this.getList();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.noticeId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    // 删除按钮操作
    handleDelete(row) {
      const noticeIds = row.noticeId;
      this.$modal
        .confirm(
          `是否确认删除${row.createNickName}发布的通知 [${row.noticeTitle}] ？`
        )
        .then(function () {
          return delNotice(noticeIds);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    // 文件移除
    handleRemove(file, fileList) {
      console.log("handleRemove", fileList);
      this.fileList = fileList;
    },
    // 文件上传成功处理
    handleFileSuccessSecond(response, file, fileList) {
      console.log("response, file, fileList", response, file, fileList);
      if (response.code == 500) {
        this.$modal.msgWarning(response.msg);
      }
      this.fileList = fileList;
      console.log("this.form", this.form);
      this.upload.open = false;
      this.upload.isUploading = false;
    },
    // 上传前
    beforeAvatarUpload(file) {
      console.log("file", file);
    },
    // 上传时文件预览
    handlePreview(file, fileList) {
      console.log("handlePreview", file, fileList);
      // 上传时
      if (file.response && file.response.data) {
        window.open(file.response.data.url);
      } else if (file.url) {
        window.open(file.url);
      }
    },
    // 预览附件（word和xlsx特殊）
    preView(item) {
      console.log("item", item);
      let lastIndex = item.url.lastIndexOf(".");
      let suffix = item.url.substring(lastIndex + 1);
      console.log("suffix", suffix);
      //文件格式是word文档、ppt、excel文件
      if (
        suffix == "doc" ||
        suffix == "docx" ||
        suffix == "ppt" ||
        suffix == "xls" ||
        suffix == "xlsx"
      ) {
        if (suffix == "doc" || suffix == "docx") {
          axios({
            method: "get",
            responseType: "blob",
            url: item.url,
            // url: "http://10.15.1.21:9001/radiation-hygiene/2023/05/12/583bf2e7b9664025ad0d14387a50b854.docx", // 自己的服务器，提供的一个word下载文件接口
          })
            .then(async (res) => {
              console.log("111", res);
              this.dialogVisibleWord = true;
              this.$nextTick(() => {
                let childRef = document.getElementsByClassName("docxRef");
                renderAsync(res.data, childRef[0]); //渲染
              });
            })
            .catch((r) => {
              console.error(r);
            });
        } else if (suffix == "xls" || suffix == "xlsx") {
          axios({
            method: "get",
            responseType: "blob",
            url: item.url,
          })
            .then(async (res) => {
              const reader = new FileReader();
              //通过readAsArrayBuffer将blob转换为ArrayBuffer对
              reader.readAsArrayBuffer(res.data); // 这里的res.data是blob文件流
              reader.onload = (event) => {
                // 读取ArrayBuffer数据变成Uint8Array
                var data = new Uint8Array(event.target.result);
                // 这里的data里面的类型和后面的type类型要对应
                var workbook = XLSX.read(data, { type: "array" });
                var sheetNames = workbook.SheetNames; // 工作表名称
                var worksheet = workbook.Sheets[sheetNames[0]];
                // var excelData = XLSX.utils.sheet_to_json(worksheet); //JSON
                let html = XLSX.utils.sheet_to_html(worksheet);
                this.dialogVisibleWord = true;
                this.$nextTick(() => {
                  console.log("1", document.getElementsByClassName("docxRef"));
                  document.getElementsByClassName("docxRef")[0].innerHTML =
                    html;
                });
              };
            })
            .catch((r) => {
              console.error(r);
            });
        } else {
          let fileUrl = encodeURIComponent(item.url);
          //使用Office Web查看器
          let officeUrl =
            "http://view.officeapps.live.com/op/view.aspx?src=" + fileUrl;
          window.open(officeUrl, "_target");
        }
      } else {
        //其他文件格式比如pdf、图片、html
        window.open(item.url);
      }
    },
    // 下载附件 (pdf和图片特殊)
    handleDownload(item) {
      let lastIndex = item.url.lastIndexOf(".");
      let suffix = item.url.substring(lastIndex + 1);
      let data = {
        url: item.url,
        name: item.name,
        type: suffix,
      };

      if (data.type == "png") {
        this.downloadImg(data);
      } else if (
        data.type == "pdf" ||
        data.type == "docx" ||
        data.type == "xlsx"
      ) {
        this.downloadFile(data);
      } else {
        this.downloadFile(data);
      }
    },
    // 下载的为文件格式
    downloadFile(data) {
      fetch(data.url, {
        method: "get",
        mode: "cors",
      })
        .then((response) => response.blob())
        .then((res) => {
          const downloadUrl = window.URL.createObjectURL(
            //new Blob() 对后端返回文件流类型处理
            new Blob([res], {
              type:
                data.type == "pdf"
                  ? "application/pdf"
                  : data.type == "docx"
                  ? "application/msword"
                  : data.type == "xlsx"
                  ? "application/vnd.ms-excel"
                  : "",
            })
          );
          //word文档为msword,pdf文档为pdf
          const link = document.createElement("a");
          link.href = downloadUrl;
          link.setAttribute("download", data.name);
          document.body.appendChild(link);
          link.click();
          link.remove();
        })
        .catch((error) => {
          window.open(data.url);
        });
    },
    // 下载的为图片格式
    downloadImg(data, quality = 0.9) {
      this.pathToBase64(data.url, quality)
        .then((res) => {
          const link = document.createElement("a");
          link.href = res;
          link.setAttribute("download", data.name);
          document.body.appendChild(link);
          link.click();
          link.remove();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取Base64且压缩图片
    pathToBase64(url, quality = 1, width = 1, height = 1) {
      return new Promise((resolve, reject) => {
        let image = new Image();
        image.onload = function () {
          let canvas = document.createElement("canvas");
          canvas.width = image.width / width;
          canvas.height = image.height / height;
          canvas.getContext("2d").drawImage(image, 0, 0);
          let result = canvas.toDataURL("image/jpeg", quality);
          resolve(result);
        };
        image.setAttribute("crossOrigin", "Anonymous");
        image.src = url;
        image.onerror = () => {
          reject(new Error("urlToBase64 error"));
        };
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.viewNumber {
  color: #2a72ee;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}
.adddialog ::v-deep .el-dialog__body {
  display: flex;
  padding: 0;
  height: 600px;
}
.adddialog ::v-deep .el-dialog__header {
  position: absolute;
  top: 0;
  right: 0;
  left: 243px;
  background-color: #fff;
  z-index: 999;
}
.adddialog ::v-deep .el-dialog__footer {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 243px;
  background-color: #fff;
  z-index: 999;
}
.left {
  width: 235px;
  height: 600px;
  display: inline-block;
  padding: 10px;
  border-right: 1px solid #b7b7b7;
  display: flex;
  flex-direction: column;
  border-radius: 10px 0 0 10px;

  &-title {
    border-bottom: 1px solid #b7b7b7;
    padding: 10px;
    width: 100%;
    color: #000;
  }
  &-dept {
    height: 450px;
    padding: 10px;
    overflow: auto;
  }
  &-tip {
    text-align: right;
    margin: auto 15px 10px 0;
  }
}
.right {
  flex: 1;
  height: 536px;
  overflow: auto;
  display: inline-block;
  padding: 10px;
  padding-top: 86px;
  border-radius: 0 10px 10px 0;
  padding-right: 50px;
  padding-left: 50px;
}
.viewdialog ::v-deep .el-dialog__body {
  height: 600px;
  overflow: auto;
}
.viewdialog ::v-deep .ql-editor {
  min-height: 400px;
}
.readdialog {
  .readNumber {
    border-bottom: 1px solid #b7b7b7;
    color: #000;
    padding-bottom: 5px;
  }
  .readTree {
    margin-top: 10px;
    height: 500px;
    overflow: auto;
  }
}
.viewdialog {
  ::v-deep .quillWrapper .ql-snow.ql-toolbar {
    display: none;
  }
  ::v-deep .ql-container {
    border: none;
  }
  .viewtitle {
    font-size: 20px;
    font-weight: bolder;
    text-align: center;
  }
  .viewinfo {
    color: #999999;
    margin: 15px 0 10px 0;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6e6e6;
    .blank {
      margin-right: 15px;
    }
  }
  .filelist {
    padding-left: 20px;
    border-top: 1px solid #e6e6e6;
    padding-top: 20px;
    margin-bottom: 20px;
    .filetitle {
      font-weight: bolder;
    }
    .filename {
      cursor: pointer;
      &:hover {
        color: #999;
      }
    }
    .download {
      color: #2a72ee;
      cursor: pointer;
      margin-left: 50px;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
.dialogVisibleWord {
  ::v-deep .el-dialog {
    width: 100%;
    height: 100%;
    max-height: 100%;
    .el-dialog__body {
      height: 93%;
      overflow: auto;
    }
  }
}
</style>
